<template>
  <div>
    <el-upload
        class="upload-demo"
        action="http://localhost:8000/carservice/carInfo/upload"
        multiple
        :limit="3">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>


    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="车辆名称">
        <el-input v-model="formInline.carName" placeholder="车辆名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
        <el-button type="primary" @click="openadd">添加</el-button>
      </el-form-item>
    </el-form>

    <el-button  icon="el-icon-star-off" type="warning" plain @click="download">导出</el-button>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="carId"
          label="车辆编号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="carOrderNo"
          label="车辆编码"
          width="120">
      </el-table-column>
      <el-table-column
          prop="carVin"
          label="车辆VIN"
          width="120">
      </el-table-column>
      <el-table-column
          prop="carName"
          label="车辆名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="tname"
          label="类型名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="bname"
          label="电池厂商名称"
          width="120">
      </el-table-column>

      <el-table-column
          prop="mname"
          label="motorName"
          width="300">
      </el-table-column>
      <el-table-column
          prop="files"
          label="图片"
          width="300">
        <template v-slot="s">
          <el-image
              v-for="f in s.row.files"
              :key="f"
              style="width: 100px; height: 100px"
              :src="f.fileName"></el-image>
        </template>
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          width="120">
      </el-table-column>
      <el-table-column
          prop="motorNumber"
          label="电机编号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="batteryNumber"
          label="电池编号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="carPrice"
          label="日租价格"
          width="120">
      </el-table-column>

      <el-table-column
          prop="createBy"
          label="记录人"
          width="120">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="记录时间"
          width="120">
      </el-table-column>
      <el-table-column
          prop="updateBy"
          label="更改人"
          width="120">
      </el-table-column>

      <el-table-column
          prop="updateTime"
          label="更改时间"
          width="120">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          width="120">
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="openEdit(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="del(scope.row.carId)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-pagination
        @current-change="goPage"
        :page-size="5"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>



    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="车辆编码" :label-width="formLabelWidth">
          <el-input v-model="form.carOrderNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="车辆vin" :label-width="formLabelWidth">
          <el-input v-model="form.carVin" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.carName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="图片" :label-width="formLabelWidth">
          <el-upload
              action="http://localhost:8000/carservice/carInfo/minio"
              :file-list="form.files"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdte">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "ListView",
  data() {
    return {
      tableData:[],
      formInline:{},
      total:0,
      pageNum:1,
      dialogFormVisible:false,
      formLabelWidth:'120px',
      form:{

      },
      dialogImageUrl: '',
      dialogVisible: false,
      fileList:[],
    }
  }, methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {

      console.log(file)
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    del(carId){
      // alert(carId)
      this.axios.post("http://localhost:8000/carservice/carInfo/del?carId="+carId).then(res=>{
        if(res.data.code==200){
          this.$message.success(res.data.msg);
          location.href="carInfo";
        }else{
          this.$message.error(res.data.msg);
        }
      })
    },
    openEdit(row){
       this.form=row;
       this.dialogFormVisible=true;
    },
    update(){
      this.axios.post("http://localhost:8000/carservice/carInfo/update",this.form).then(res=>{
        if(res.data.code==200){
          this.$message.success(res.data.msg);
          this.dialogFormVisible=true;
          location.href="carInfo";
        }else{
          this.$message.error(res.data.msg);
        }
      })
    },
    saveOrUpdte(){
      console.log(this.form.files);
      let formData = new FormData();
      this.fileList.forEach(i=>{
        formData.append("files",i.raw);
      })
      alert(JSON.stringify(formData));
      // let carId = this.form.carId;
      // if(!carId){
      //    this.add();
      // }else{
      //   this.update();
      // }

    },
    add(){
      this.axios.post("http://localhost:8000/carservice/carInfo/add",this.form).then(res=>{
          if(res.data.code==200){
             this.$message.success(res.data.msg);
             this.dialogFormVisible=true;
             location.href="carInfo";
          }else{
            this.$message.error(res.data.msg);
          }
      })
    },
    openadd(){
       this.dialogFormVisible=true;
    },
    download(){
       location.href="http://localhost:8000/carservice/carInfo/download";
    },
    goPage(page){
       this.pageNum=page;
       this.list();
    },
    list(){
       this.axios.post("http://localhost:8000/carservice/carInfo/list?pageNum="+this.pageNum,this.formInline).then(res=>{
            this.tableData=res.data.data.list;
            this.total=res.data.data.total;
       })
    }
  }, created() {
     this.list();
  }
}
</script>

<style scoped>

</style>